<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>Document</title>
    <link rel="stylesheet" href="bootstrap@3.3.4/css/bootstrap.css">
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        html,body{
            height: 100%;
            overflow: hidden;
        }
        #wrap{
            width: 100%;
            height: 100%;
            position: relative;
        }
        .out{
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);           
        }
        .time{
            position: absolute;
            left: 20px;
            bottom: 50px;
            color: white;
            font-weight: 400;
        }
        .mutedFull{
            position: absolute;
            right: 20px;
            bottom: 50px;
            color: white;
            font-weight: 400;
        }
        .mutedFull>span{
            display: inline-block;
            margin-left: 10px;
        }
        .outer{
            position: absolute;
            bottom: 20px;
            left: 2%;
            width: 96%;
            height: 10px;
            border-radius: 1px;
            background-color: #fff;
        }
        .inner{
            width: 0px;
            height: 100%;
            background-color:red;
            border-radius:1px;
        }
        .playPause{
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            width: 50px;
            height: 50px;
            background-color: white;                 
            border-radius: 50%;            
            font-size: 20px;              
        }
        .playPause span{
            display: block;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
           
        }
    </style>
</head>

<body>
    <section id="wrap">
        <div class="out">
            <video src="video/2.mp4"  id="myVideo"></video>
                      <div class="time">
                <span class="currentTime"></span>
                <span>/</span>
                <span class="durationTime"></span>
            </div>
          
            <div class="outer">
                <div class="inner"></div>
            </div>
            <div class="mutedFull">
                <!-- <span class="glyphicon glyphicon-headphones"></span> -->
                <span class="glyphicon glyphicon-volume-down"></span>
                <span class="glyphicon glyphicon-volume-up"></span>
                <span class="glyphicon glyphicon-fullscreen"></span>
            </div>
        </div>
        <!-- 播放暂停 -->
        <div class="playPause">
            <span class="glyphicon glyphicon-play"></span>
        </div>
        
    </section>   
    <script>
        window.onload = function(){
            //播放暂停
            var myVideo = document.getElementById('myVideo');
            var playPause = document.querySelector('.playPause');
            playPause.onclick = function(){                
                if(myVideo.paused){
                    myVideo.play();
                    myVideo.volume = 0.2;
                    playPause.children[0].className = 'glyphicon glyphicon-pause';                    
                }else{
                    myVideo.pause();
                    playPause.children[0].className = 'glyphicon glyphicon-play'; 
                }
            }
            //当前时间、视频总时长
            var currentTime = document.querySelector('.currentTime');
            var durationTime = document.querySelector('.durationTime');
            console.log(durationTime);
            // myVideo.onloadeddata = function(){}
            durationTime.innerHTML =  timeFormat(myVideo.duration);
            
            myVideo.ontimeupdate = function(){
                currentTime.innerHTML = timeFormat(myVideo.currentTime);

                //进度条
                //进度条即inner的宽度 /outer的宽度 = 当前时间/视频总时长 
                var inner = document.querySelector('.inner');
                var bfb = myVideo.currentTime/myVideo.duration*100+'%';
                inner.style.width = bfb;

            }
            //进度条的拖动
            var outer = document.querySelector('.outer');
            // var out = document.querySelector('.out');
            
            
            // outer.onclick = function(e){
            //     console.log(e.pageX);
            //     console.log(out.offsetLeft);
            //     //注意：out.offsetLeft和outer.getBoundingClientRect().left用法
            //     var x = e.clientX - outer.getBoundingClientRect().left;
            //     var outerWidth = outer.offsetWidth;
            //     myVideo.currentTime = x/outerWidth * myVideo.duration;
            //    // console.log( myVideo.currentTime);
            // }
            //不仅仅能点，还要能拖动
            outer.onmousedown = function(e){
                var x = e.pageX - outer.getBoundingClientRect().left;
                var outerWidth = outer.offsetWidth;
                myVideo.currentTime = x/outerWidth * myVideo.duration;
                this.move = true;
            }
            outer.onmousemove = function(e){
                if(this.move){
                    var x = e.pageX - outer.getBoundingClientRect().left;
                    var outerWidth = outer.offsetWidth;
                    var inner = document.querySelector('.inner');
                    inner.style.width = x + 'px';
                    myVideo.currentTime = x/outerWidth * myVideo.duration;

                }
            }
            outer.onmouseup = function(){
                this.move = false;
            }


            //静音
            var mutedFull = document.querySelector('.mutedFull');
            console.log(mutedFull.children[0]);
            mutedFull.children[0].onclick = function(){
                if(myVideo.muted){
                    myVideo.muted = false;
                    this.className = 'glyphicon glyphicon-headphones';
                }else{
                    myVideo.muted = true;
                    this.className = 'glyphicon glyphicon-volume-off';
                }
            }
            //音量大小
            mutedFull.children[1].onclick = function(){
                myVideo.volume = myVideo.volume-0.1;
                console.log(myVideo.volume);
                if(myVideo.volume==0){
                    mutedFull.children[0].className = 'glyphicon glyphicon-volume-off';
                }
            }
            mutedFull.children[2].onclick = function(){
                myVideo.volume = myVideo.volume + 0.1;               
            }
            //全屏
            mutedFull.children[3].onclick = function(){
                myVideo.webkitRequestFullScreen();
            }


            
           


            //将秒转换为时分秒
            function timeFormat(time){
                var second = parseInt(time);
                var minute = 0;
                var hour = 0;
                if(second >= 60){
                    minute = parseInt(second / 60);
                    second = parseInt(second % 60);
                    if(minute >= 60){
                        hour = parseInt(minute / 60);
                        minute = parseInt(minute % 60);
                    }
                }
                if(second < 10) second = '0'+ second;
                if(minute < 10) minute = '0' + minute;
                var result = minute + ':' + second;
                if(hour > 0) result = hour + ':' + result;
                return result;
            }



        }
    </script>

</body>

</html>